<template>
  <div class="staking-page">
      <div class="page-container">
        <div class="page-header">
          <h1 class="page-title">{{ $t('navigation.staking') }}</h1>
          <p class="page-subtitle">{{ $t('pages.staking.subtitle') }}</p>
        </div>

        <div class="staking-dashboard">
          <!-- A区块：质押统计 -->
          <StakingStats
            :staked-near="stakingData.stakedNear"
            :daily-reward-near="stakingData.dailyRewardNEAR"
            :daily-reward-k-r-w="stakingData.dailyRewardKRW"
          />

          <!-- B区块：累计收益 -->
          <AccumulatedRewards
            :total-rewards-k-r-w="stakingData.totalRewardsKRW"
            :total-rewards-n-e-a-r="stakingData.totalRewardsNEAR"
            :daily-reward-k-r-w="stakingData.dailyRewardKRW"
          />

          <!-- C区块：当前质押产品信息 -->
          <CurrentProductInfo />
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import StakingStats from '@/components/Staking/StakingStats.vue'
import AccumulatedRewards from '@/components/Staking/AccumulatedRewards.vue'
import CurrentProductInfo from '@/components/Staking/CurrentProductInfo.vue'
import { stakingApiService, type StakingData } from '@/services/stakingApi'
import { eventBus, Events } from '@/utils/eventBus'

const stakingData = ref<StakingData>({
  lockedNear: 0,
  stakedNear: 0,
  dailyRewardKRW: 0,
  dailyRewardNEAR: 0,
  totalRewardsKRW: 0,
  totalRewardsNEAR: 0,
  annualYield: 0
})

const loadStakingData = async () => {
  try {
    const [overviewData, rewardsData] = await Promise.all([
      stakingApiService.getStakingData(),
      stakingApiService.getStakingRewards()
    ])

    // 使用 overview 的基础数据
    stakingData.value = {
      ...overviewData,
      // 使用 rewards 接口的累计收益数据（与钱包页面一致）
      totalRewardsKRW: rewardsData.totalRewards,
      totalRewardsNEAR: rewardsData.totalRewardsNear
    }
  } catch (error) {
    console.error('스테이킹 데이터 로드 실패:', error)
  }
}

onMounted(async () => {
  await loadStakingData()

  // 监听数据刷新事件
  eventBus.on(Events.REFRESH_STAKING_DATA, loadStakingData)
  eventBus.on(Events.WITHDRAW_SUCCESS, loadStakingData)
})

onUnmounted(() => {
  // 清理事件监听
  eventBus.off(Events.REFRESH_STAKING_DATA, loadStakingData)
  eventBus.off(Events.WITHDRAW_SUCCESS, loadStakingData)
})
</script>

<style scoped lang="scss">
.staking-page {
  padding: 32px 0;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 48px;
  
  .page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
  }
  
  .page-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
  }
}

.staking-dashboard {
  margin-top: 32px;
}

@media (max-width: 768px) {
  .page-container {
    padding: 0 16px;
  }
  
  .page-header {
    margin-bottom: 32px;
    
    .page-title {
      font-size: 2rem;
    }
  }
  
  .staking-dashboard {
    margin-top: 24px;
  }
}
</style>
